<template>
  <div class="theme-switcher">
    <!-- 主题切换按钮 -->
    <el-button
      :icon="currentTheme.icon"
      circle
      size="small"
      class="theme-btn animate__animated animate__bounceIn"
      data-aos="zoom-in"
      data-aos-delay="100"
      @click="toggleTheme"
    />

    <!-- 主题选择面板 -->
    <transition name="theme-panel">
      <div v-if="showThemePanel" class="theme-panel animate__animated animate__fadeInDown">
        <div class="theme-options">
          <div
            v-for="(theme, index) in themes"
            :key="theme.name"
            class="theme-option animate__animated animate__fadeInLeft"
            :class="{ active: currentTheme.name === theme.name }"
            :style="{ animationDelay: `${index * 0.1}s` }"
            @click="switchTheme(theme)"
          >
            <div class="theme-preview" :style="{ background: theme.preview }" />
            <span class="theme-name">{{ theme.label }}</span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const themes = [
  {
    name: 'light',
    label: '明亮主题',
    icon: 'Sunny',
    preview: 'linear-gradient(135deg, #f8fafc, #e2e8f0)'
  },
  {
    name: 'dark',
    label: '暗色主题',
    icon: 'Moon',
    preview: 'linear-gradient(135deg, #0f172a, #1e293b)'
  },
  {
    name: 'blue',
    label: '蓝色主题',
    icon: 'Star',
    preview: 'linear-gradient(135deg, #3b82f6, #1e40af)'
  },
  {
    name: 'purple',
    label: '紫色主题',
    icon: 'Star',
    preview: 'linear-gradient(135deg, #8b5cf6, #6d28d9)'
  },
  {
    name: 'green',
    label: '绿色主题',
    icon: 'Star',
    preview: 'linear-gradient(135deg, #10b981, #047857)'
  }
]

const currentTheme = ref(themes[0])
const showThemePanel = ref(false)

// 切换主题面板
const toggleTheme = () => {
  showThemePanel.value = !showThemePanel.value
}

// 切换主题
const switchTheme = (theme) => {
  currentTheme.value = theme
  showThemePanel.value = false

  // 移除所有主题类
  document.documentElement.classList.remove('dark', 'theme-blue', 'theme-purple', 'theme-green')

  // 添加当前主题类
  if (theme.name === 'dark') {
    document.documentElement.classList.add('dark')
  } else if (theme.name !== 'light') {
    document.documentElement.classList.add(`theme-${theme.name}`)
  }
}

// 初始化主题
onMounted(() => {
  const savedTheme = localStorage.getItem('theme') || 'light'
  const theme = themes.find(t => t.name === savedTheme) || themes[0]
  switchTheme(theme)
})
</script>

<style scoped lang="scss">
.theme-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.theme-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
  }
}

.theme-panel {
  position: absolute;
  top: 50px;
  right: 0;
  padding: 16px;
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--bg-hover);
  }

  &.active {
    background: var(--primary-color);

    .theme-name {
      color: white;
    }
  }
}

.theme-preview {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
}

.theme-name {
  font-size: 14px;
  font-family: 'Comic Neue', cursive;
  color: var(--text-primary);
  font-weight: 500;
}

/* 主题面板动画 */
.theme-panel-enter-active,
.theme-panel-leave-active {
  transition: all 0.3s ease;
}

.theme-panel-enter-from,
.theme-panel-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
